<template>
  <view class="loading-container">
    <text v-if="loading" class="loading-text">深度思考中~</text>

    <view v-else class="loading-dots">
      <text class="dot"></text>
      <text class="dot"></text>
      <text class="dot"></text>
    </view>
  </view>
</template>

<script setup>
let ab = false;
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.loading-container {
  width: 100%;
  text-align: left;
  padding: 20 0rpx;

  .loading-text {
    padding-right: 10rpx;
    font-size: 24rpx;
    color: var(--a-three-text-color);
    // margin-left: 10rpx;
  }
}

.loading-dots {
  display: inline-flex;
  gap: 8rpx;

  .dot {
    width: 12rpx;
    height: 12rpx;
    background: var(--a-main-color);
    border-radius: 50%;
    display: inline-block;

    &:nth-child(1) {
      animation: dotAnimate 1s ease infinite;
    }

    &:nth-child(2) {
      animation: dotAnimate 1s ease 0.2s infinite;
    }

    &:nth-child(3) {
      animation: dotAnimate 1s ease 0.4s infinite;
    }
  }
}

@keyframes dotAnimate {

  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-5rpx);
  }
}
</style>